<template>
  <div class="side">
    <div id="sidebar1">
      <side-bar-item :title="sidebar1title" :aclass="acttype" @liClick="liClick1"></side-bar-item>
    </div>
    <div id="sidebar2">
      <side-bar-item :title="sidebar2title" :aclass="actcreator" @liClick="liClick2"></side-bar-item>
    </div>
  </div>
</template>

<script>
import {getActType, getCreator} from "@/network/side";
import SideBarItem from "@/components/baritem/SideBarItem";

export default {
  name: "Sidebar",
  components: {SideBarItem},
  data(){
    return{
      acttype:{},
      actcreator:{},
      sidebar1title:"分类",
      sidebar2title:"创建者",
    }
  },
  created() {
    this.getActTypes()
    this.getCreators()
  },
  emits: {
    liClick1: null,//事件没有检验
    liClick2: null,
  },
  methods:{
    getActTypes(){
      getActType().then(res=>{
        this.acttype = res.data
      })
    },
    getCreators(){
      getCreator().then(res=>{
        this.actcreator = res.data
      })
    },
    liClick1(val,index){
      this.$emit('liClick1',val,index);
      // console.log('sidebar1---ok');
      // console.log(val,index);
    },
    liClick2(val,index){
      this.$emit('liClick2',val,index);
      // console.log('sidebar2---ok');
      // console.log(val,index);
    }
  }
}
</script>

<style scoped>
.side {
  position: absolute;
  background-color: #f7f3f3;
  top: 52px;
  width: 15%;
  height: calc(100vh - 104px);
  border-right:2px solid #aaaaaa;
  border-bottom:2px solid #aaaaaa;
  overflow: hidden;
}
.side::after {
  content: "";
  display: block;
  height: 0;
  clear:both;
}
#sidebar2 {
  margin-top: 10vh;
}

.list-group {
  padding: 5px;
}
.list-group-item {
  list-style: none;
  border: 2px solid #dddddd;
  padding: 5px;
  position: relative;
}
.title {
  text-align: center;
}
.badge {
  position: absolute;
  right: 2px;
  background-color: #aaaaaa;
  border-radius: 25%;
}
a {
  text-decoration: none;
}
a:link {
  color: #2e3133;
}
a:hover {
  text-transform:uppercase;/* 鼠标指针移动到链接上 */
  border: 1px solid #2e3133;
}
</style>